<template>
    <Teleport to="body">
        <div class="mask">
            <n-progress style="margin: 0 8px 12px 0" type="circle" :percentage="percentage" :color="themeVars.successColor"
                :rail-color="changeColor(themeVars.successColor, { alpha: 0.2 })"
                :indicator-text-color="themeVars.successColor" />
        </div>
    </Teleport>
</template>

<script lang="ts" setup>
import { NProgress } from "naive-ui";
import { changeColor } from 'seemly'
import { useThemeVars } from 'naive-ui'

interface IItem {
    percentage: number;
}
defineProps<IItem>();

const themeVars = useThemeVars();

</script>

<style lang="less" scoped>
.mask {
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    z-index: 3;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.8);
}
</style>